<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        h3{
            margin-left: 10px;
            margin-top: 20px;
        }
        .title{
            line-height: 40px;
            font-size: 20px;
            padding: 10px 20px;
        }
        .list .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }
        .left{
            position: relative;
        }
        .list .item img{
            width: 80px;
            height: 70px;
            border-radius: 8px;
        }
        .list .item img .price{
            position: absolute;
            left: 30px;
            
        }
        .middle{
            line-height: 15px;
            margin-left: -40px;
        }
        .middle .name{
            font-weight: bold;
            font-size: 14px;
        }
        .middle .desc{
            color: orangered;
            font-size: 12px;
        }
        .middle .money{
            color: orangered;
            font-size: 12px;
        }
        .middle .address{
            color: #ccc;
            font-size: 12px;
        }
        .right button{
            border-radius: 20px;
            background-color: orangered;
            color: white;
            border: none;
            padding: 5px 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3><&nbsp;&nbsp;饿了么</h3>
        <div class="title">热门单品</div>
        <div class="list">
            <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <div class="name"> {{ item.name }} </div>
                    <div class="desc"> {{ item.desc }} </div>
                    <div class="money">{{ item.money }} </div>
                    <div class="address">{{ item.address }} </div>
                </div>
                <div class="right">
                    <button> {{ item.status == 1 ? '立即兑' : (item.status == 2 ? '兑换成功' : '兑换失败') }} </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="../js/vue-2.5.21.js"></script>
<script>
     var v = new Vue({
            
            el:'#app', //el Vue实例挂载的dom节点
            data: {
                tasklist:[
                    { id:1, pic:'../img/c1.jpg', name:'脐橙3斤 快递到家',desc:'兑换后入手价8.9元',money:'价格:10',address:'适用门店>',status:1 },
                    { id:2, pic:'../img/c2.jpg', name:'耙耙柑2斤 快递到家',desc:'兑换后入手价9.9元',money:'价格:30',address:'适用门店>',status:1},
                    { id:3, pic:'../img/c3.webp', name:'水果捞350g',desc:'兑换后入手价6.9元',money:'价格:60',address:'适用门店>',status:1 },
                ]
            } , 
            computed: {} , 
            watch: {} ,
            methods: {} , 
            filters: {} , 
            directives: {} , 
            components: {} , 
        }) 
</script>